<template>
  <div class="bottom">
    <!-- 导航条 -->
    <div class="content">
      <div @click="sendToParent">{{ one }}</div>
      <div @click="sendToParent">{{ two }}</div>
      <div @click="sendToParent">{{ three }}</div>
      <div @click="sendToParent">{{ four }}</div>
      <div @click="sendToParent">{{ five }}</div>
      <div @click="sendToParent">{{ six }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bottom",
  props: {
    one: String,
    two: String,
    three: String,
    four: String,
    five: {
      type: String,
      default: 100
    },
    six: String
  },
  methods: {
    sendToParent(event) {
      // 使用$emit触发事件，并传递数据
      this.$emit('from-child', event.target.innerText);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: aquamarine;
  height: 10.5vh;
}
.content > div {
  color: grey;
  padding: 5px;
  cursor: pointer;
}
</style>